<template>
  <div class="container">
    <back-page :backType="true" />
    <div class="header-box">
      <swiper class="top-swiper height-222" :indicator-dots="false" autoplay="true" interval="5000"
              duration="1000">
        <block v-for="(item, index) in listBanner" :key="index">
          <swiper-item>
            <img v-if="fileSpace" mode="aspectFill" class="height-222 width-375" :src="item"/>
          </swiper-item>
        </block>
      </swiper>
      <div class="fixed-status" :style="'height:' + spaceBarHeight + 'px;'"></div>
      <!-- <div @click="$pt.navigateBack({ delta: 1 })" class="fixed-top height-44 v-align-c pad-l-5" :style="'top:' + spaceBarHeight + 'px;'">
        <van-icon name="arrow-left" color="#ffffff" size="20px" />
      </div> -->
      <div class="mar-l-10 mar-r-10 pancel-bar pad-l-17 pad-r-17 pad-b-10">
        <div class="v-align-c">
          <img class="mar-t--22 width-82 height-82 border-w" v-if="goodsEnterprise.enterpriseLogo" :src="goodsEnterprise.enterpriseLogo" alt="">
          <div class="mar-l-12">
            <div class="font-16 font-w">{{goodsEnterprise.enterpriseName}}</div>
            <div class="font-12 font-color-9 mar-t-9">{{goodsEnterprise.mainCamp}}</div>
          </div>
        </div>
        <div class="height-25 pad-l-7 pad-r-7 brand-row flex flex-between mar-t-6"
            v-if="goodsEnterprise.qualificationsFlag === 1"
            @click="$pt.navigateTo({url: '/pages/shop/business-shop/certificate/main?enterpriseId=' + enterpriseId})">
          <div class="font-12">
            <span class="brand-icon mar-r-9">品牌</span>
            <span>企业认证资质</span>
          </div>
          <div>
            <van-icon name="arrow" color="#999999" size="12px" />
          </div>
        </div>
        <div v-if="goodsEnterprise.enterpriseIntroduce">
          <div class="text-over mar-t-12" :class="{'auto-text': isExpend}">
            {{goodsEnterprise.enterpriseIntroduce}}
          </div>
          <div class="mar-t-20 pad-b-8">
            <div class="flex flex-center" @click="isExpend = !isExpend">
              <span class="font-12 font-color-9 mar-r-7">查看更多</span>
              <van-icon v-if="!isExpend" name="arrow-down" color="#999999" size="12px" />
              <van-icon v-else name="arrow-up" color="#999999" size="12px" />
            </div>
          </div>
        </div>
      </div>
      <div class="bg-color-white pad-t-12 pad-b-12 font-14">
        <div class="v-align-c">
          <div class="align-c flex-item pos-rel" @click="setSort(0)">
            <span :class="sortIndex===0?'tab-on':'tab-off'">综合</span>
          </div>
          <div class="align-c flex-item pos-rel" @click="setSort(1)">
            <div class="flex">
              <span :class="sortIndex===1?'tab-on':'tab-off'">起批数</span>
              <div class="mar-l-3">
                <van-icon v-if="listQuery.wholesaleNumSort===''" name="play" class="down" color="#999999" size="12px"  />
                <van-icon v-if="listQuery.wholesaleNumSort===0" name="play" class="up" color="#FF5742" size="12px" />
                <van-icon v-if="listQuery.wholesaleNumSort===1" name="play" class="down" color="#FF5742" size="12px" />
              </div>
            </div>
          </div>
          <div class="align-c flex-item pos-rel" @click="setSort(2)">
            <div class="flex">
              <span :class="sortIndex===2?'tab-on':'tab-off'">批发价</span>
              <div class="mar-l-3">
                <van-icon v-if="listQuery.wholesalePriceSort===''" name="play" class="down" color="#999999" size="12px"  />
                <van-icon v-if="listQuery.wholesalePriceSort===0" name="play" class="up" color="#FF5742" size="12px" />
                <van-icon v-if="listQuery.wholesalePriceSort===1" name="play" class="down" color="#FF5742" size="12px" />
              </div>
            </div>
          </div>
          <div class="align-c flex-item pos-rel" @click="pageTocategory">
            <div class="flex v-align-c">
              <img v-if="fileSpace" mode="widthFix" class="width-16 height-16 mar-l-2"
                  :src="fileSpace + '/images/w-sort-icon.png'"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pad-l-10 pad-r-10 pad-t-3.5">
      <div class="goodinfo" v-for="(item, index) in listData" :key="index" @click="pageToDetail(item)">
        <div class="v-align-c">
          <div class="goodinfo-img width-123 height-123">
            <img v-if="item.mainImage" class="width-123 height-123" :src="item.mainImage" alt="">
          </div>
          <div class="goodinfo-content">
            <div>
              <div class="goodinfo-content__title">{{item.title}}</div>
              <span class="goodinfo-content__icon" v-if="item.wholesaleNum">{{item.wholesaleNum}} {{item.unit}}起批</span>
            </div>
            <div class="goodinfo-content__price">
              <div class="color-ff">
                <span class="font-15">￥</span>
                <span class="font-24">{{item.wholesalePrice}}</span>
              </div>
              <div class="color-a8 font-12">批发价</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="finishedLine" class="pad-t-15 pad-b-15">
        <base-line title="到底了" txtColor="#aaaaaa" lineColor="#bbbbbb"></base-line>
      </div>
    </div>
    <div class="nodata" v-if="dataNone">
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="align-c mar-t-15 font-17">暂无数据</div>
    </div>
  </div>
</template>
<script>
import baseLine from '@/components/BaseLine'
import BackPage from '@/components/BackPage'
import { pageProjectGoodsByMemberId } from '@/api/home'
import { getProjectGoodsPage } from '@/api/distribution'
export default {
  components: { baseLine, BackPage },
  data() {
    return {
      spaceBarHeight: 0,
      listBanner: [],
      goodsEnterprise: {},
      sortIndex: 0,
      isExpend: false,
      listData: [],
      finishedLine: false,
      listQuery: {
        memberId: '',
        categoryId: '',
        title: '',
        currentPage: 1,
        size: 5,
        wholesalePriceSort: '', // 排序批发价排序 0升序 1降序
        wholesaleNumSort: '' // 起批数排序 0升序 1降序
      },
      length: 0,
      enterpriseId: '', // 企业ID
      pullLoad: {
        loading: false,
        finished: false
      },
      dataNone: false,
      isClose: false // 用来判断是否从上一页面返回回来的
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight']
  },
  onShow() {
    this.enterpriseId = this.getCurrentPage().query.enterpriseId
    // 判断是否从上个页面返回
    if (!this.isClose) {
      this.categoryId = this.getCurrentPage().query.categoryId
    } else {
      this.categoryId = ''
      this.listQuery.categoryId = ''
    }
    if (this.categoryId) {
      this.listQuery.categoryId = this.categoryId
    }
    this.listData = []
    this.listQuery.currentPage = 1
    this.pullLoad.finished = false
    this.initGoodsList()
    this.getProjectGoodsPage()
  },
  onHide() {
    this.isClose = true
  },
  onUnload() {
    this.categoryId = ''
    // 用来判断是否从上一页面返回回来的
    this.isClose = true
  },
  onReachBottom() {
    if (!this.pullLoad.finished) {
      this.initGoodsList()
    }
  },
  methods: {
    setSort(sortIndex) {
      this.sortIndex = sortIndex
      switch (this.sortIndex) {
        default:
        case 0:
          this.listQuery.wholesaleNumSort = ''
          this.listQuery.wholesalePriceSort = ''
          break
        case 1:
          this.listQuery.wholesaleNumSort = this.listQuery.wholesaleNumSort ? 0 : 1
          this.listQuery.wholesalePriceSort = ''
          break
        case 2:
          this.listQuery.wholesaleNumSort = ''
          this.listQuery.wholesalePriceSort = this.listQuery.wholesalePriceSort ? 0 : 1
          break
      }
      this.listQuery.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
      this.initGoodsList()
    },
    initGoodsList() {
      this.finishedLine = false
      this.dataNone = false
      this.$utils.showToast({
        title: '数据加载中',
        icon: 'loading'
      })
      this.listQuery.memberId = this.getCustomerId
      this.listQuery.enterpriseId = this.getEnterpriseId
      pageProjectGoodsByMemberId(this.listQuery).then(response => {
        this.$pt.hideToast()
        if (response.isError) return
        if (this.listQuery.currentPage === 1) {
          this.listData = []
        }
        response.data.records.forEach(item => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.dataNone = true
        }
        // 翻页+1
        this.listQuery.currentPage++
        // 不使用total，提升后端接口性能
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        if (this.pullLoad.finished && this.listData.length > this.listQuery.size) {
          this.finishedLine = true
        }
      })
    },
    getProjectGoodsPage() {
      getProjectGoodsPage({
        memberId: this.getCustomerId,
        enterpriseId: this.getEnterpriseId
      }).then((response) => {
        if (response.isError) return
        this.goodsEnterprise = response.data
        this.listBanner = []
        response.data.goodsBannerDTOS.forEach((banner) => {
          this.listBanner.push(banner.bannerImage)
        })
        if (this.listBanner.length === 0) {
          // 默认banner
          this.listBanner.push(this.fileSpace + '/images/1-2-banner.png')
        }
        // if (this.goodsEnterprise.enterpriseIntroduce) {
        //   if (this.goodsEnterprise.enterpriseIntroduce.length > 105) {
        //     this.moreBrandBoolean = false
        //   } else {
        //     this.moreBrandBoolean = true
        //   }
        // }
      }).catch(() => {
      })
    },
    pageToDetail(item) {
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30'})
    },
    pageTocategory() {
      if (!this.getShowBuyCard) return
      this.enterpriseId = this.getCurrentPage().query.enterpriseId
      this.$pt.navigateTo({url: '/pages/shop/business-shop/category/main?enterpriseId=' + this.enterpriseId})
    }
  }
}
</script>
<style lang="less" scoped>
.fixed-init{
  position: fixed;
  width: 100%;
  left: 0;
}
.container{
  line-height: 1;
}
.header-box{
  background: white;
}
.fixed-status{
  .fixed-init;
  top: 0;
}
.fixed-top{
  z-index: 9;
  .fixed-init;
  box-sizing: border-box;
}
.pancel-bar{
  // height: 209px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 6.5px #CECECE;
  margin-top: -30px;
  position: relative;
  .border-w{
    border: 3px solid white;
    border-radius: 50%;
    background: white;
  }
  .brand-row{
    background: rgba(229, 229, 229, 0.25);
    .brand-icon{
      display: inline-block;
      width: 35px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      color: white;
      background: #CE2D2F;
      border-radius: 3px;
    }
  }
  .text-over{
    // height: 54px;
    line-height: 18px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .auto-text{
    height: auto;
    overflow: unset;
    -webkit-line-clamp: unset;
  }
}
.flex-evenly{
  justify-content: space-evenly;
  align-items: center;
}
.tab-on{
  color: #FF5742;
}
.tab-off{
  color: #999999;
}
.up{
  transform: rotate(-90deg);
}
.down{
  transform: rotate(90deg);
}
.color-a8{
  color: #A8A8A8;
}
.color-ff{
  color: #FF5742;
}
.goodinfo{
  border-radius: 5px;
  background: white;
  margin-top: 10px;
  overflow: hidden;
  &-content{
    height: 123px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px 10px 10px;
    line-height: 1;
    box-sizing: border-box;
    flex: 1;
    &__title{
      height: 20px;
      line-height: 1.3;
      font-weight: bold;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
      margin-bottom: 8px;
    }
    &__icon{
      background: rgba(254, 115, 41, .12);
      color: #FF7328;
      padding: 0px 4px;
      font-size: 12px;
      border-radius: 2px;
    }
    &__price{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }
}
.nodata{
  margin: 30px 0;
  text-align: center;
  img{
    margin: 0 auto;
  }
}
</style>
